<template>
  <XnDialog
    title="修改评价人员"
    :visible.sync="selfVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="50%"
    left="10vw"
    class="branch_dialog"
    @close="cancel">
    <el-scrollbar style="max-height: 300px"></el-scrollbar>
    <div class="evaluate-users-box">
      <!-- <el-row v-if="users.leaders.length">
        <el-col :span="5">
          <el-checkbox :indeterminate="indeterminate1" v-model="checkLeader" @change="leaderCheckAllChange">
            领导成员
          </el-checkbox>
        </el-col>
        <el-col :span="19">
          <el-checkbox-group v-model="leaders" @change="checkedLeaderChange">
            <el-checkbox v-for="user in users.leaders" :label="user.userId" :key="user.userId">
              {{ user.userName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row> -->
      <el-row v-if="users.noLeaders.length">
        <el-col :span="5">
          <el-checkbox :indeterminate="indeterminate2" v-model="checkNoleader" @change="noleaderCheckAllChange">
            <!-- 非领导成员 -->
            全部
          </el-checkbox>
        </el-col>
        <el-col :span="19">
          <el-checkbox-group v-model="noLeaders" @change="checkedNoleaderChange">
            <el-checkbox v-for="user in users.noLeaders" :label="user.userId" :key="user.userId">
              {{ user.userName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <!-- <el-row v-if="users.nonCivil.length">
        <el-col :span="5">
          <el-checkbox :indeterminate="indeterminate3" v-model="checkNonCivil" @change="nonCivilCheckAllChange">
            非公务员成员
          </el-checkbox>
        </el-col>
        <el-col :span="19">
          <el-checkbox-group v-model="nonCivil" @change="checkedNonCivilChange">
            <el-checkbox v-for="user in users.nonCivil" :label="user.userId" :key="user.userId">
              {{ user.userName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row> -->
    </div>
    <div class="evaluate-btn-box">
      <el-button @click="cancel" class="btnBorder" size="small">取 消</el-button>
      <el-button size="small" class="btnBg" type="primary" @click="submit">确定修改</el-button>
    </div>
  </XnDialog>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
import { listAllAssessmentMember } from '@apis/mzEvaluation.js'
export default {
  name: 'EvaluationUsers',
  components: { XnDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    leaderList: {
      type: Array,
      default: () => [],
    },
    noLeaderList: {
      type: Array,
      default: () => [],
    },
    nonCivilList: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['close'],
  watch: {
    visible: {
      handler(bool) {
        this.selfVisible = bool
        if (bool) {
          this.getAllUsers()
        }
      },
      deep: true,
      immediate: true,
    },
    leaderList: {
      handler(list) {
        if (list.length) {
          this.leaders = list.map(item => item.userId)
        }
      },
      deep: true,
      immediate: true,
    },
    noLeaderList: {
      handler(list) {
        if (list.length) {
          this.noLeaders = list.map(item => item.userId)
        }
      },
      deep: true,
      immediate: true,
    },
    nonCivilList: {
      handler(list) {
        if (list.length) {
          this.nonCivil = list.map(item => item.userId)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      id: this.$route.query.id || '',
      users: {
        leaders: [], // 领导成员
        noLeaders: [], // 非领导成员
        nonCivil: [], // 非公务员
      },
      leaders: [],
      noLeaders: [],
      nonCivil: [],
      checkLeader: false,
      indeterminate1: true,
      checkNoleader: false,
      indeterminate2: true,
      checkNonCivil: false,
      indeterminate3: true,
    }
  },
  methods: {
    getAllUsers() {
      const userInfo = JSON.parse(localStorage.PSKH_USERINFO)
      const { orgId = '' } = userInfo.loginPostInfo || {}
      listAllAssessmentMember({ id: orgId }).then(res => {
        const { leaders = [], noLeaders = [], nonCivil = [] } = res.data || {}
        this.users = Object.assign(this.users, {
          leaders: leaders || [],
          noLeaders: noLeaders || [],
          nonCivil: nonCivil || [],
        })
        this.checkedLeaderChange(this.leaders)
        this.checkedNoleaderChange(this.noLeaders)
        this.checkedNonCivilChange(this.nonCivil)
      })
    },
    cancel() {
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    leaderCheckAllChange(val) {
      this.leaders = val ? this.users.leaders.map(item => item.userId) : []
      this.indeterminate1 = false
    },
    noleaderCheckAllChange(val) {
      this.noLeaders = val ? this.users.noLeaders.map(item => item.userId) : []
      this.indeterminate2 = false
    },
    nonCivilCheckAllChange(val) {
      this.nonCivil = val ? this.users.nonCivil.map(item => item.userId) : []
      this.indeterminate3 = false
    },

    checkedLeaderChange(value) {
      const checkedCount = value.length
      this.checkLeader = checkedCount === this.users.leaders.length
      this.indeterminate1 = checkedCount > 0 && checkedCount < this.users.leaders.length
    },
    checkedNoleaderChange(value) {
      const checkedCount = value.length
      this.checkNoleader = checkedCount === this.users.noLeaders.length
      this.indeterminate2 = checkedCount > 0 && checkedCount < this.users.noLeaders.length
    },
    checkedNonCivilChange(value) {
      const checkedCount = value.length
      this.checkNonCivil = checkedCount === this.users.nonCivil.length
      this.indeterminate3 = checkedCount > 0 && checkedCount < this.users.nonCivil.length
    },

    submit() {
      const leaders = []
      const noLeaders = []
      const nonCivil = []
      this.users.leaders.forEach(item => {
        if (this.leaders.includes(item.userId)) {
          leaders.push(item)
        }
      })
      this.users.noLeaders.forEach(item => {
        if (this.noLeaders.includes(item.userId)) {
          noLeaders.push(item)
        }
      })
      this.users.nonCivil.forEach(item => {
        if (this.nonCivil.includes(item.userId)) {
          nonCivil.push(item)
        }
      })
      this.$emit('submit', {
        leaders,
        noLeaders,
        nonCivil,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog__body {
  .evaluate-users-box {
    padding: 20px;
    min-height: 240px;
    .el-row {
      margin-bottom: 40px;
      .el-checkbox {
        margin-right: 25px;
        margin-bottom: 20px;
      }
    }
  }
  .evaluate-btn-box {
    text-align: right;
  }
}
</style>
